<div class="box {{row.node=='parent'?'box-success':'box-primary'}}"
     style="border-left: 1px solid #d2d6de; border-right: 1px solid #d2d6de">
    <div class="box-header" dnd-draggable="row" dnd-type="'r'"
         nd-effect-allowed="move"
         dnd-moved="curBoard.layout.rows.splice($index, 1)" style="cursor:move">
        {{row.node=='parent'?'CONFIG.DASHBOARD.MAIN_NODE':'CONFIG.DASHBOARD.SUB_NODE'|translate}}
        <input ng-if="row.node=='parent'" type="text" ng-model="row.nodeName" style="width: 300px;"
               class="form-control" placeholder="{{'CONFIG.DASHBOARD.NODE_NAME'|translate}}">
        <input type="text" ng-model="row.title" style="width: 300px;"
               class="form-control" placeholder="{{'CONFIG.DASHBOARD.TITLE'|translate}}">
        <div class="box-tools pull-right">
            <div class="input-group input-group-sm" style="width: 300px;">
                <input type="text" name="table_search" ng-model="row.height"
                       class="form-control pull-right" placeholder="{{'CONFIG.DASHBOARD.HEIGHT'|translate}}">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-xs btn-success"
                            ng-click="addWidget(row)">
                        {{'CONFIG.DASHBOARD.ADD_COLUMN'|translate}}
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="collapse" title="{{'COMMON.COLLAPSE'|translate}}"><i
                            class="fa fa-minus"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" data-widget="remove" title="{{'COMMON.REMOVE'|translate}}"
                            ng-click="curBoard.layout.rows.splice($index, 1)"><i
                            class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="box-body">
        <div class="row" dnd-list="row.widgets" dnd-allowed-types="['w']"
             style="min-height: 60px">
            <div class="dndPlaceholder col-md-2">
                <div class="box sort-highlight"
                     style="height: 40px;display: inline-block;vertical-align: middle;"></div>
            </div>
            <div class="col-md-{{widget.width}}" ng-repeat="widget in row.widgets">
                <div class="box box-primary"
                     style="border-left: 1px solid #d2d6de; border-right: 1px solid #d2d6de">
                    <div class="box-header" dnd-draggable="widget" dnd-type="'w'"
                         nd-effect-allowed="move"
                         dnd-moved="row.widgets.splice($index, 1)"
                         style="cursor:move">
                        {{widget.name}}
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool"
                                    data-widget="collapse" title="{{'COMMON.COLLAPSE'|translate}}"><i
                                    class="fa fa-wrench"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool"
                                    data-widget="remove"
                                    ng-click="row.widgets.splice($index, 1)" title="{{'COMMON.REMOVE'|translate}}"><i
                                    class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="form-group">
                            <label>{{'CONFIG.DASHBOARD.NAME'|translate}}</label>
                            <input type="text" ng-model="widget.name"
                                   ng-model-options="{updateOn: 'blur'}"
                                   class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label>{{'CONFIG.DASHBOARD.WIDTH'|translate}}(1-12)</label>
                            <input type="text" ng-model="widget.width"
                                   ng-model-options="{updateOn: 'blur'}"
                                   class="form-control"/>
                        </div>
                        <div class="form-group">
                            <label>{{'CONFIG.DASHBOARD.WIDGET'|translate}}</label>
                            <ui-select ng-model="widget.widgetId" on-select="widget.name = $item.name">
                                <ui-select-match>
                                    {{$select.selected.name}} ({{$select.selected.dataset}})
                                </ui-select-match>
                                <ui-select-choices group-by="widgetGroup"
                                                   repeat="w.id as w in widgetList | filter:{name : $select.search}">
                                    {{w.name + "(" + w.dataset + ")"}}
                                </ui-select-choices>
                            </ui-select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>